<template>
  <q-infinite-scroll ref="infiniteScroll" @load="onLoad" :offset="50" v-if="!isLoad && projectList.length > 0">
        
    <q-card
      v-for="(item, index) in projectList"
      :key="index"
      class="shadow-6 q-pa-none q-mb-md"
      @click="handleStudio(item)"
    >
      <q-card-section class="q-pa-none">
        <q-list style="height: 70px" class="q-pa-none">
          <q-item clickable v-ripple style="height: 100%">
            <q-item-section avatar>
              <q-avatar :color="item.color" text-color="white">
                {{ item.name.substring(0, 1) }}
              </q-avatar>
            </q-item-section>
            <q-item-section class="text-subtitle1">
              <q-item-label :lines="1" style="max-width: 200px">{{
                item.name
              }}</q-item-label>
              <q-item-label caption
                >项目ID：{{ item.pid }}</q-item-label
              ></q-item-section
            >
            <q-item-section side>
              <q-circular-progress
                show-value
                font-size="12px"
                :value="item.progress"
                size="40px"
                :thickness="0.22"
                :color="item.color"
                track-color="grey-3"
                class="q-ma-none"
              >
                {{ item.progress }}%
              </q-circular-progress>
            </q-item-section>
          </q-item>
        </q-list>
      </q-card-section>
      <q-card-section class="q-px-sm q-py-none q-pb-md">
        <div class="row q-ml-sm items-center justify-between">
          <div class="text-grey">
            执行时间：{{ item.stime }}-{{ item.etime }}
          </div>
          <q-badge
            v-if="item.process == 0"
            :color="item.color"
            outline
            class="q-ml-sm q-pa-sm q-mr-sm"
          >
            策划中
          </q-badge>
          <q-badge
            v-if="item.process == 1"
            :color="item.color"
            outline
            class="q-ml-sm q-pa-sm q-mr-sm"
          >
            拍摄中
          </q-badge>
          <q-badge
            v-if="item.process == 2"
            :color="item.color"
            outline
            class="q-ml-sm q-pa-sm q-mr-sm"
          >
            后期中
          </q-badge>
          <q-badge
            v-if="item.process == 3"
            :color="item.color"
            outline
            class="q-ml-sm q-pa-sm q-mr-sm"
          >
            审阅中
          </q-badge>
          <q-badge
          v-if="item.process == 4"
          :color="item.color"
          outline
          class="q-ml-sm q-pa-sm q-mr-sm"
        >
          待结项
        </q-badge>
        </div>
      </q-card-section>
    </q-card>
    <template v-slot:loading>
      <div class="column justify-center items-center q-my-md">
        <q-spinner-dots color="primary" size="40px" />
        <span class="text-primary q-mb-md">疯狂加载中……</span>
      </div>
    </template>
    <div
    v-if="noMoreProject"
    style="height: 50px"
    class="row items-center justify-center text-grey"
  >
    --暂无更多项目--
  </div>
  

</q-infinite-scroll>
</template>

<script>

import { date } from "quasar";
import internal from "stream";
import { setTimeout } from 'timers';
export default {
  name: "projectList",
  props: {
    projectList: {
      type: Array,
    },
    isLoad: {
      type: Boolean,
    },
    noMoreProject:{
      type:Boolean
    },
    isRefresh:{
      type:Boolean
    }
    
  },
  data() {
    return {
      isWechat: false,
      isReady:false,
    };
  },
  watch:{
    isRefresh:function(newVal,oldVal){
      this.isReady=newVal

    }

  },
  created() {
    if (window.__wxjs_environment === "miniprogram") {
      this.isWechat = true;
    } else {
      if (this.$q.platform.is.mobile) {
        this.projectStyle = {
          "padding-bottom": "68px",
        };
      }
    }
  },
  mounted() {},
  methods: {
    onLoad(index, done) {
      if (!this.noMoreProject) {
        console.log("start load");
        console.log(this.isReady);
        this.$emit('refresh-project');
        setTimeout(() => {
          
          done();     
        }, 2000);
    

        

      } else {
        done(true);
      }
    },
    handleStudio(item) {
      if (this.isWechat) {
        wx.miniProgram.redirectTo({
          url: `/pages/project/studio/studio?pid=${item.pid}`,
        });
      } else {
       
          this.$router.push("/studio/" + item.pid);
        
      }
    },
  },
};
</script>
